<template>
	<view class="content">
		<view class="subject mt20" v-for="(item,index) in active" :key="index">
			<view class="activeImage">
				<image class="activeImage" :src="item.headimg" mode="aspectFill"></image>
			</view>
			<view>
				<view class="flex card" v-for="(card,idex) in item.content" :key="idex">
					<view class="cardImage">
						<image class="cardImage" :src="card.image" mode="aspectFill"></image>
					</view>
					<view class="cardText fs30 c3 ml20">{{card.name}}</view>
				</view>
			</view>
			<view class="flex moreDot">
				<u-icon name="more-dot-fill" color="#333333" size="36"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: [{
						headimg: "https://01.minipic.eastday.com/20170925/20170925142513_d41d8cd98f00b204e9800998ecf8427e_1.png",
						content: [{
							name: "宝宝鸭嘴杯学饮杯婴儿喝奶水瓶带手柄奶瓶",
							image: "../../static/good/1.jpg"
						}]
					},
					{
						headimg: "https://01.minipic.eastday.com/20170925/20170925142513_d41d8cd98f00b204e9800998ecf8427e_1.png",
						content: [{
								name: "宝宝鸭嘴杯学饮杯婴儿喝奶水瓶带手柄奶瓶",
								image: "../../static/good/1.jpg"
							},
							{
								name: "宝宝鸭嘴杯学饮杯婴儿喝奶水瓶带手柄奶瓶",
								image: "../../static/good/1.jpg"
							}
						]
					}
				]
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 0 20rpx;
	}

	.subject {
		background: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.activeImage {
		width: 710rpx;
		height: 264rpx;
	}

	.card {
		padding: 10rpx 10rpx 24rpx;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.card:last-child {
		border-bottom: none;
	}

	.cardImage {
		width: 240rpx;
		height: 160rpx;
	}

	.cardText {
		width: 430rpx;
	}

	.moreDot {
		padding: 18rpx 22rpx 32rpx;
		justify-content: flex-end;
	}
</style>
